<template>
  <!-- 版本履历 -->
  <a-modal :footer="null" :title="headerTitle" :visible.sync="dialogVisible" @cancel="handleCancel" width="1200px">
    <!-- 表格 -->
    <s-table
      ref="table"
      :scroll="{ y: 300 }"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :showPagination="false"
    >
      <!-- 表格操作栏 -->
      <span slot="actions" slot-scope="text, record">
        <template>
          <a @click="handleManage(record)">查看详情</a>
        </template>
      </span>
    </s-table>
    <!-- 页脚操作栏 -->
    <div slot="footer" class="btn_box">
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格
export default {
  name: 'VisionHistory',
  components: {
    STable
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return '历史版本信息'
      }
    },
    // 列表api
    api: {
      type: Object,
      default() {
        return {}
      }
    },
    // 请求参数
    args: {
      type: Object,
      default() {
        return {}
      }
    },
    // 查看详情携带参数
    query: {
      type: Object,
      default() {
        return {}
      }
    },
    // 列表api请求axios
    loadList: {
      type: String,
      default() {
        return 'history'
      }
    },
    // 查看详情路径
    pathName: {
      type: String,
      default: () => '/quality/plotProgram/plotProgramEdit'
    },
    // 表头
    columns: {
      type: Array,
      default: () => [
        {
          title: '版本号',
          dataIndex: 'version',
          customRender(e) {
            return e ? 'V' + e : ''
          }
        },
        {
          title: '上传时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '100px',
          scopedSlots: { customRender: 'actions' }
        }
      ]
    }
  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.$refs.table?.refresh(true)
        })
      }
    }
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    }
  },
  data() {
    return {
      loadData: () => {
        const requestParameters = Object.assign({}, this.args)
        return this.api[this.loadList](requestParameters).then((res) => {
          return res
        })
      }
    }
  },
  methods: {
    /**
     * 操作栏
     */
    handleManage(record) {
      let query = Object.assign(
        {},
        {
          editModel: 0
        },
        this.query
      )
      if (record && record.id) {
        query.historyId = record.id
        query.id = this.args?.id
      }
      this.handleCancel()
      this.$router.push({
        name: this.pathName,
        query
      })
    },
    /**
     * 关闭弹窗
     */
    handleCancel() {
      this.dialogVisible = false
    }
  }
}
</script>
